<script setup>
import { ref, defineProps, computed } from 'vue';

// 定义组件接收的props
const props = defineProps({
  // 商品列表数据，由父组件传入
  goods: {
    type: Array,
    default: () => []
  },
  // 标题，由父组件传入
  title: {
    type: String,
    default: '商品列表'
  },
  // 图片基础路径，可自定义
  imageBasePath: {
    type: String,
    default: '/shengxian/'
  }
});

// 默认商品数据，当props中没有提供goods时使用 - 使用实际存在的图片文件
const defaultGoods = ref([
  {
    name: '进口三文鱼',
    image: 'shucai9.jpg',
    price: 88.00,
    unit: '/份'
  },
  {
    name: '澳洲牛排',
    image: 'shucai10.jpg',
    price: 128.00,
    unit: '/块'
  },
  {
    name: '新西兰羊排',
    image: 'shucai11.jpg',
    price: 98.00,
    unit: '/份'
  },
  {
    name: '波士顿龙虾',
    image: 'shucai12.jpg',
    price: 198.00,
    unit: '/只'
  },
  {
    name: '阿拉斯加帝王蟹',
    image: 'shucai13.jpg',
    price: 298.00,
    unit: '/只'
  },
  {
    name: '冰岛鳕鱼',
    image: 'shucai14.jpg',
    price: 68.00,
    unit: '/份'
  },
  {
    name: '挪威三文鱼',
    image: 'shucai15.jpg',
    price: 98.00,
    unit: '/份'
  },
  {
    name: '阿根廷红虾',
    image: 'shucai16.jpg',
    price: 78.00,
    unit: '/盒'
  }
]);

// 计算属性，优先使用传入的goods，没有则使用默认数据
const goodsList = computed(() => {
  return props.goods.length > 0 ? props.goods : defaultGoods.value;
});</script>

<template>
  <div class="fresh-goods-container wrapper">
    <h2 class="goods-section-title">{{ title }}</h2>
    <div class="goods-grid">
      <div v-for="(item, index) in goodsList" :key="index" class="goods-item">
        <div class="goods-card">
          <div class="goods-image-container">
            <img
              :src="`${imageBasePath}${item.image}`"
              :alt="item.name"
              class="goods-image"
            >
          </div>
          <div class="goods-info">
            <p class="goods-name">{{ item.name }}</p>
            <div class="goods-price-container">
              <span class="goods-price">¥{{ item.price }}</span>
              <span class="goods-unit">{{ item.unit }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.fresh-goods-container {
  padding: 20px;
  background-color: #ebf7f8;
}

.goods-section-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
  padding-left: 10px;
  border-left: 4px solid #ff5000;
}

/* 使用CSS Grid实现响应式网格布局，一行显示4个商品 */
.goods-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* 响应式调整，在小屏幕设备上显示更少的列 */
@media (max-width: 1024px) {
  .goods-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .goods-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .goods-grid {
    grid-template-columns: 1fr;
  }
}

.goods-card {
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.goods-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.goods-image-container {
  position: relative;
  width: 100%;
  padding-bottom: 100%; /* 保持图片宽高比为1:1 */
  overflow: hidden;
}

.goods-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.goods-card:hover .goods-image {
  transform: scale(1.05);
}

.goods-info {
  padding: 12px;
}

.goods-name {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #333;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.goods-price-container {
  display: flex;
  align-items: baseline;
}

.goods-price {
  font-size: 16px;
  font-weight: bold;
  color: #ff5000;
}

.goods-unit {
  margin-left: 4px;
  font-size: 12px;
  color: #999;
}
</style>
